<template>
  <div class="home-bg">
    <div class="home-title">
      <!-- LNG调度系统  -->
      <span>运输船舶调度系统</span></div>
    <div class="home-body">
      <div class="home-left">
        <div class="left-item">
        <span :key="updateKey" :class="{
          'item-title': true,
          'item-title-1920': width === '1',
          'item-title-2560': width === '2',
          'item-title-1440': width === '3',
          'item-title-1680': width === '4'
        }">
          月度到港量占比
        </span>
          <div class="left-item-chart">
            <div class="left-item-chart-left">
              <RingChart/>
            </div>
            <div class="left-right-box">
              <div class="left-item-1">
                <div class="left-item-title">
                  <span>800</span>
                  <span>万吨</span>
                </div>
                <div class="left-item-subtitle">
                  <span>本月到港LNG量</span>
                </div>
              </div>
              <div class="left-item-border"></div>
              <div class="left-item-1">
                <div class="left-item-title">
                  <span>8</span>
                  <span>航次</span>
                </div>
                <div class="left-item-subtitle">
                  <span>本月到港次数</span>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="left-item">
            <span :key="updateKey" :class="{
          'item-title': true,
          'item-title-1920': width === '1',
          'item-title-2560': width === '2',
          'item-title-1440': width === '3',
          'item-title-1680': width === '4'
        }">
         年度同比订单量走势分析
        </span>
          <div class="left-item-chart-one">
            <BarLineChart/>
          </div>
        </div>
        <div class="left-item">
        <span :key="updateKey" :class="{
          'item-title': true,
          'item-title-1920': width === '1',
          'item-title-2560': width === '2',
          'item-title-1440': width === '3',
          'item-title-1680': width === '4'
        }">
<!--      LNG船龄分布      -->
       船龄分布
        </span>
          <div class="left-item-chart">
            <div class="left-item-chart-two">
              <LNGRingChart/>
            </div>
            <div class="left-item-chart-two">
              <VerticalBarChart/>
            </div>
          </div>
        </div>
        <div class="left-item">
        <span :key="updateKey" :class="{
          'item-title': true,
          'item-title-1920': width === '1',
          'item-title-2560': width === '2',
          'item-title-1440': width === '3',
          'item-title-1680': width === '4'
        }">
         货船计划执行情况
        </span>
          <div class="left-item-chart">
            <div class="left-item-chart-two">
              <SemicircleRingChart/>
            </div>
            <div class="left-item-chart-two">
              <div class="two-item">
                <div class="two-img">
                  <img src="../../assets/images/Home/yearPlan.png" alt="">
                  <span>年度计划</span>
                </div>
                <div class="two-subtitle">
                  <span>36</span>
                  <span>项</span>
                </div>
              </div>
              <div class="two-item">
                <div class="two-img">
                  <img src="../../assets/images/Home/type1.png" alt="">
                  <span>已完成</span>
                </div>
                <div class="two-subtitle">
                  <span>24</span>
                  <span>项</span>
                </div>
              </div>
              <div class="two-item">
                <div class="two-img">
                  <img src="../../assets/images/Home/type3.png" alt="">
                  <span>执行中</span>
                </div>
                <div class="two-subtitle">
                  <span>36</span>
                  <span>项</span>
                </div>
              </div>
              <div class="two-item">
                <div class="two-img">
                  <img src="../../assets/images/Home/type2.png" alt="">
                  <span>执行中</span>
                </div>
                <div class="two-subtitle">
                  <span>36</span>
                  <span>项</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="home-model">
        <div class="model-top">
          <div class="top-item">
            <div class="top-item-title">
              <span>372812</span>
              <span>万吨</span>
            </div>
            <div class="item-subtitle">
              <span>总采购量</span>
            </div>
          </div>
          <div class="top-item-border"></div>
          <div class="top-item">
            <div class="top-item-title">
              <span>372812</span>
              <span>万吨</span>
            </div>
            <div class="item-subtitle">
              <!--      LNG总采购量      -->
              <span>总采购量</span>
            </div>
          </div>
          <div class="top-item-border"></div>
          <div class="top-item">
            <div class="top-item-title">
              <span>372812</span>
              <span>万吨</span>
            </div>
            <div class="item-subtitle">
              <span>总采购量</span>
            </div>
          </div>
        </div>
        <div class="model-bottom">
          <div class="bottom-item">
          <span :key="updateKey" :class="{
          'item-title': true,
          'item-title-1920': width === '1',
          'item-title-2560': width === '2',
          'item-title-1440': width === '3',
          'item-title-1680': width === '4'
        }">
          港口装载量排名TOP5
        </span>
            <BoatsVerticalBarChart/>
          </div>
          <div class="bottom-item">
           <span :key="updateKey" :class="{
          'item-title': true,
          'item-title-1920': width === '1',
          'item-title-2560': width === '2',
          'item-title-1440': width === '3',
          'item-title-1680': width === '4'
        }">
          船舶运输量排名TOP5
        </span>
            <BoatsVerticalBarChart/>
          </div>
        </div>
      </div>
      <div class="home-right">
        <div class="right-item-1">
          <span :key="updateKey" :class="{
          'item-title': true,
          'item-title-1920': width === '1',
          'item-title-2560': width === '2',
          'item-title-1440': width === '3',
          'item-title-1680': width === '4'
        }">
          运输船舶情况统计
        </span>
          <TransportBarChart/>
        </div>
        <div class="right-item-2">
         <span :key="updateKey" :class="{
          'item-title': true,
          'item-title-1920': width === '1',
          'item-title-2560': width === '2',
          'item-title-1440': width === '3',
          'item-title-1680': width === '4'
        }">
          各地区销售排行
        </span>
          <BarChart/>
        </div>
        <div class="right-item-3">
         <span :key="updateKey" :class="{
          'item-title': true,
          'item-title-1920': width === '1',
          'item-title-2560': width === '2',
          'item-title-1440': width === '3',
          'item-title-1680': width === '4'
        }">
          月度
        </span>
          <LineChart/>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted} from "vue";
import BarChart from './components/BarChart.vue';
import RingChart from '@/pages/Home/components/RingChart.vue';
import BarLineChart from '@/pages/Home/components/BarLineChart.vue';
import LNGRingChart from '@/pages/Home/components/LNGRingChart.vue';
import VerticalBarChart from '@/pages/Home/components/VerticalBarChart.vue';
import SemicircleRingChart from '@/pages/Home/components/SemicircleRingChart.vue';
import LineChart from '@/pages/Home/components/LineChart.vue';
import TransportBarChart from '@/pages/Home/components/TransportBarChart.vue';
import BoatsVerticalBarChart from '@/pages/Home/components/BoatsVerticalBarChart.vue';

let width = ref('0')
const updateKey = ref(0)
const computedWeight = () => {
  console.log('window.screen.width', window.screen.width)
  const windowWidth =  window.screen.width
  if (windowWidth === 1920) {
    width = '1'
  } else if (windowWidth === 2560) {
    width = '2'
  } else if (windowWidth === 1440) {
    width = '3'
  } else if (windowWidth === 1680) {
    width = '4'
  }
  updateKey.value +=1
//   const internalInstance  = getCurrentInstance()
// //操作数据后更新视图
//   internalInstance.ctx.$forceUpdate()
  console.log('width', width)

}
onMounted(() => {
  window.addEventListener('resize', computedWeight)
  computedWeight()
})
</script>

<style lang="scss" scoped>
.home-bg {
  width: 100%;
  height: 100%;
  background: inherit;
  background-color:#001020;
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  .home-title {
    width: 100%;
    height: 66px;
    background: url('../../assets/images/Home/title.png')no-repeat;
    background-size: 100% 100%;
    span {
      background: linear-gradient(180deg,#ffffff 31%, #0fa8d9);
      -webkit-background-clip: text;
      font-size: 32px;
      font-family: FZZongYi-M05S, FZZongYi-M05S-Regular;
      font-weight: bold;
      text-align: left;
      color: transparent;
      line-height: 37px;
      letter-spacing: 0.18px;
    }
  }
  .home-body {
    display: flex;
    //height: 100%;
    padding: 20px 20px 14px 20px;
    background: url("../../assets/images/Home/modle-bg.png")no-repeat;
    background-size: 100% 100%;
    .home-left {
      width: 25%;
      .left-item {
        width:100%;
        height: calc((100vh - 176px)/4);
        background: url("../../assets/images/Home/left-item-bg.png")no-repeat;
        background-size: 100% 100%;
        margin-bottom: 20px;
        .left-item-chart {
          display: flex;
          justify-content: space-between;
          width: 100%;
          height: 100%;
          .left-item-chart-left {
            width: 70%;
          }
          .left-right-box {
            width: 30%;
            .left-item-1 {
              width: 100%;
              text-align: left;
              .left-item-title {
                span:first-child {
                  font-size: 32px;
                  font-weight: 700;
                  color: #43fffd;
                  line-height: 37px;
                  letter-spacing: 0.05px;
                }
                span:last-child {
                  font-size: 14px;
                  font-weight: 500;
                  text-align: left;
                  color: #afc0d5;
                  line-height: 20px;
                  letter-spacing: 0.01px;
                  padding-left: 5px;
                }
              }
              .left-item-subtitle {
                font-size: 16px;
                color:#AFC0D5;
                margin-top: 8px;
              }
            }
            .left-item-border {
              width: 133px;
              height: 1px;
              border: 2px solid;
              margin: 20px 0;
              border-image: linear-gradient(63deg, rgba(200,200,200,0.00) 17%, #008eff 51%, rgba(151,151,151,0.00)) 2 2;
            }
          }
          .left-item-chart-two {
            width: 50%;
            height: 100%;
            .two-item {
              display: flex;
              justify-content: space-between;
              margin: 10px;
              .two-img {
                img {
                  width: 30px;
                  height: 30px;
                  margin-right: 12px;
                }
                span {
                  font-size: 14px;
                  font-family: PingFang SC, PingFang SC-Regular;
                  font-weight: 400;
                  text-align: left;
                  color: #ffffff;
                  line-height: 30px;
                  letter-spacing: 0.01px;
                }
              }
              .two-subtitle {
                span:first-child{
                  font-size: 16px;
                  font-family: PingFang SC, PingFang SC-Semibold;
                  font-weight: 600;
                  text-align: left;
                  color: #43fffd;
                  line-height: 30px;
                  letter-spacing: 0.01px;
                }
                span:last-child {
                  font-size: 12px;
                  font-family: PingFang SC, PingFang SC-Regular;
                  font-weight: 400;
                  text-align: left;
                  color: #afc0d5;
                  line-height: 17px;
                  letter-spacing: 0.01px;
                  padding-left: 5px;
                }
              }
            }
          }

        }
        .left-item-chart-one {
          width: 100%;
          height: 100%;
        }
      }
    }
    .home-right {
      width: 25%;
      .right-item-1 {
        width: 100%;
        height: calc((100vh - 490px)/3);
        background: url("../../assets/images/Home/right-item-1.png")no-repeat;
        background-size: 100% 100%;
        margin-bottom: 20px;
      }
      .right-item-2 {
        width: 100%;
        height: calc(100vh/3);
        background: url("../../assets/images/Home/right-item-2.png")no-repeat;
        background-size: 100% 100%;
        margin-bottom: 20px;
      }
      .right-item-3 {
        width: 100%;
        height: calc(100vh/3);
        background: url("../../assets/images/Home/right-item-3.png")no-repeat;
        background-size: 100% 100%;
        margin-bottom: 20px;
      }
    }
    .home-model {
      width: 50%;
      position: relative;
      .model-top {
        width: 70%;
        height: 108px;
        background: url("../../assets/images/Home/modile-top.png")no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 17%;
        display: flex;
        text-align: center;
        padding: 20px 40px;
        .top-item {
          text-align: center;
          width: 34%;
          //padding-left: 20px;
          .top-item-title {
            span:first-child {
              font-size: 32px;
              font-weight: 700;
              //text-align: left;
              color: #43fffd;
              line-height: 37px;
              letter-spacing: 0.05px;
            }
            span:last-child {
              font-size: 14px;
              font-weight: 500;
              text-align: center;
              color: #afc0d5;
              line-height: 20px;
              letter-spacing: 0.01px;
              padding-left: 5px;
            }
          }
          .item-subtitle {
            font-size: 16px;
            color: #ffffff;
            margin-top: 8px;
          }
        }
        .top-item-border {
          width: 1px;
          height: 90px;
          border: 1px solid;
          border-image: linear-gradient(63deg, rgba(200,200,200,0.00) 17%, #43FFFD 51%, rgba(151,151,151,0.00)) 2 2;
        }
      }
      .model-bottom {
        display: flex;
        width: 100%;
        position: absolute;
        bottom: 0;
        .bottom-item {
          width: 50%;
          height: calc((100vh - 176px)/4);
          background: url("../../assets/images/Home/bottom-item-bg.png")no-repeat;
          background-size: 100% 100%;
          margin: 20px;
        }
      }

    }
  }
}
.item-title {
  background: linear-gradient(180deg,#ffffff 31%, #0fa8d9);
  -webkit-background-clip: text;
  font-size: 20px;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  text-align: left;
  color: transparent;
  line-height: 20px;
  letter-spacing: 0.01px;
}
.item-title-2560 {
  line-height: 40px;
}
.item-title-1920 {
  line-height: 29px;
  font-size: 14px;
}
.item-title-1440 {
  font-size: 10px;
  line-height: 29px;
}
.item-title-1680 {
  font-size: 12px;
  line-height: 29px;
}

</style>
